<template>
    <!-- 存放的是dom标签 div p span-->
    <div class="content">
        <van-row>
            <van-col span="3">
                <van-icon name="apps-o" size="30" color="#ffffff" style="margin-top: 15px; margin-left: 13px;" />
            </van-col>
            <van-col span="18">
                <van-search v-model="keyword" shape="round" background="#ff5454" placeholder="请输入搜索关键词"
                    @search="onSearch" />
            </van-col>
            <van-col span="3">
                <van-icon name="friends" size="33" color="#ffffff" style="margin-top: 12px; margin-left: 13px;" />
            </van-col>
        </van-row>
        <!--轮播图-->
        <van-swipe :autoplay="3000" lazy-render>
            <!--v-for 是vue中的循环指令  和java中的高for循环类似-->
            <van-swipe-item v-for="item in productData" :key="item">
                <!-- : src 表示绑定 一般需要传递动态数据的时候 进行绑定 -->
                <img :src="item" width="100%" height="260" />

            </van-swipe-item>
        </van-swipe>
        <!-- 通知栏 -->
        <van-notice-bar left-icon="volume-o" text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。" />
        <!--快捷键入口-->
        <div class="icons">
            <van-swipe class="my-swipe" :autoplay="4000" indicator-color="white">
                <van-swipe-item>
                    <van-grid :column-num="5" icon-size="40">
                        <van-grid-item v-for="item in icondata" :key="item.id" :icon="item.img" :text="item.text" />
                    </van-grid>

                </van-swipe-item>
                <van-swipe-item>
                    <van-grid :column-num="5" icon-size="40">
                        <van-grid-item v-for="item in icondata" :key="item.id" :icon="item.img" :text="item.text" />
                    </van-grid>
                </van-swipe-item>
            </van-swipe>
            <!---秒杀-->
            <div class="ms">
                <van-row>
                    <van-col span="4"></van-col>
                    <van-col span="20">
                      
                    </van-col>
                </van-row>
            </div>


        </div>
        <!--商品推荐-->
        <div class="pdts">
            <van-row gutter="10">
                <van-grid :column-num="2">
                    <van-grid-item v-for="item in productList" :key="item.id" @click="onProduct(item.id)">
                        <img :src="item.img" alt="" width="200" height="200">
                        <!--vue有一个文本赋值 {{  }} 文本插值表达式-->
                        <span class="texts">{{ item.name }}</span>
                        <div class="prices" style="margin-left: -128px;">
                            <span>￥</span><em>{{ item.price }}</em>
                        </div>
                        <div style="margin-left: 0px; width: 100%;">
                            <!-- 两端对齐 -->
                            <van-row justify="space-between">
                                <van-col span="16">
                                    <span style="color: #a4a1a1;">128条评论</span>
                                </van-col>
                                <van-col span="2"></van-col>
                                <van-col span="6">
                                    <div class="kxs">看相似</div>
                                </van-col>
                            </van-row>
                            <!-- <van-row>
                <van-col span="13">
                  <span style="color: #a4a1a1;">128条评论</span>
                </van-col>
                <van-col span="2"></van-col>
                <van-col span="9">
                  <div>
                    看相似
                  </div>
                </van-col>
              </van-row> -->

                        </div>
                    </van-grid-item>

                </van-grid>
            </van-row>


        </div>

    </div>




    <van-tabbar v-model="active">
        <van-tabbar-item icon="wap-home">首页</van-tabbar-item>
        <van-tabbar-item icon="cluster"
            url="https://minicaty-pro.pf.jd.com/index.html?swbr=1&fromori=redirect">分类</van-tabbar-item>
        <van-tabbar-item icon="shopping-cart">购物车</van-tabbar-item>
        <van-tabbar-item icon="friends">个人中心</van-tabbar-item>
    </van-tabbar>
</template>

<script setup>
//  就是 javascript 代码
// ref 是响应式 数据类型
import { ref, onMounted } from 'vue';
const active = ref(0);
const keyword = ref('');

// 轮播图数据
const productData = ref([
    "https://p3.dcarimg.com/img/tos-cn-i-dcdx/903bb29cfd724b98a3e8de8aae427b85~1270x0.png",
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
])

// 定义快捷入口图标
const icondata = ref([
    { id: 101, text: '华蓝超市', img: 'https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png' },
    { id: 102, text: '华蓝电器', img: 'https://m.360buyimg.com/babel/jfs/t20270715/237082/37/21845/7616/6694edddFc764124a/38d00b686257b0f4.png' },
    { id: 103, text: '服装美装', img: 'https://img20.360buyimg.com/babel/jfs/t20270715/36751/25/21385/7651/6694ee02F878cddef/13ce837dd39ad1ad.png' },
    { id: 104, text: '充值中心', img: 'https://img20.360buyimg.com/babel/jfs/t20270715/44839/8/24550/7935/6694ee27F8775a577/b63c6a2fa0327964.png' },
    { id: 105, text: '华蓝会员', img: 'https://img14.360buyimg.com/babel/jfs/t20270715/243181/3/13649/9018/6694ee5fF6aa391d4/1b020aa3f9cf89a0.png' },
])
const icondata2 = ref([
    { id: 101, text: '华蓝生鲜', img: 'https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png' },
    { id: 102, text: '华蓝国际', img: 'https://m.360buyimg.com/babel/jfs/t20270715/237082/37/21845/7616/6694edddFc764124a/38d00b686257b0f4.png' },
    { id: 103, text: '服装美装', img: 'https://img20.360buyimg.com/babel/jfs/t20270715/36751/25/21385/7651/6694ee02F878cddef/13ce837dd39ad1ad.png' },
    { id: 104, text: '充值中心', img: 'https://img20.360buyimg.com/babel/jfs/t20270715/44839/8/24550/7935/6694ee27F8775a577/b63c6a2fa0327964.png' },
    { id: 105, text: '华蓝会员', img: 'https://img14.360buyimg.com/babel/jfs/t20270715/243181/3/13649/9018/6694ee5fF6aa391d4/1b020aa3f9cf89a0.png' },
])

//商品数据
const productList = ref([
    { id: 101, img: "https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/250827/1/29205/96433/67bfdb5aF35d12293/4f0d061bd57e4be0.jpg", name: '鲁花 食用油 5S物理压榨 一级 花生油 6.18L 油 0反式脂肪酸 特香纯正', price: '168.99' },
    { id: 102, img: "https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/291342/36/10031/60494/683662a5F87d9457f/8890815489ec57be.jpg", name: 'Apple 苹果 iPhone 14 Pro 苹果14 Pro二手手机5G 二手苹果手机 暗紫色 256G', price: '3698.00' },
    { id: 103, img: "https://img3.zuke.com/u/2021051519364842689.jpg", name: '金科西城大院10栋31—2', price: '115.00' },
    { id: 104, img: "https://img3.zuke.com/u/2020081623115311714.jpg", name: '丽都锦城三室两厅两卫出租', price: '8999.00' },
])

// onMounted(() => {
//   console.log(keyword.value);

// })

//y引入axios
import axios from 'axios';

const callProductApi = () => { 
    axios({
        url: '',
        method: 'get',
        data: {
            
        }
    })
}


//需要定义路由对象
import { useRouter } from 'vue-router';
const router = useRouter();

//函数定义路由跳转
const onProduct = (id) => { 
    console.log(id);  // /moveDetail?id=101'
    router.push({ path:'/moveDetail',query:{id:id}})
}

const onSearch = () => {
    console.log(keyword.value);

}



</script>

<style scoped>
/* 存放的是css样式 */
.content {
    height: 100vh;
    background-color: #ff5454;
}

.van-notice-bar {
    background: #ff5454;
    color: aliceblue;
    font-weight: 800;
}

.icons {
    background-color: aliceblue;
    width: 98%;
    height: 105px;
    border-radius: 20px;
    margin: 0 auto;

    :deep(.van-grid-item__content) {
        background-color: aliceblue !important;
        border-radius: 20px;
    }
}

.pdts {
    margin-top: 10px;

    .prices {
        padding-top: 8px;

        span {
            color: #ff5454;
        }

        em {
            color: #ff5454;
            font-size: 20px;
            font-weight: 700;
            font-style: normal;
        }
    }

}

.kxs {
    background-color: aliceblue;
    width: 59px;
    height: 23px;
    border-radius: 10px;
    font-size: 14px;
    text-align: center;
    line-height: 23px;
}

.texts {
    margin-top: 8px;
    display: -webkit-box;
    /* 必须设置为box */
    -webkit-line-clamp: 2;
    /* 限制显示的行数 */
    -webkit-box-orient: vertical;
    /* 垂直排列盒子中的项目 */
    overflow: hidden;
    /* 隐藏溢出的内容 */
}
</style>
